<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/1/5
  Time: 3:36 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="GBK">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>仿京东网页-欢迎登录</title>
    <link type="text/css" rel="stylesheet" href="//misc.360buyimg.com/user/passport/1.0.0/??/widget/base/base.css,widget/common-2016-1124/common-2016-1124.css,/widget/login-form-2018-0827/login-form-2018-0827.css,/widget/login-banner/login-banner.css,/widget/safe-step/safe-step.css,/widget/foreign-number-layer-170524/foreign-number-layer-170524.css" source="widget">
    <link type="text/css" rel="stylesheet" href="//misc.360buyimg.com/user/passport/1.0.0/css/tinyscrollbar-170524.css">
    <script type="text/javascript" async="" src="//static.360buyimg.com/risk-cdn/seq/s.js?v=6"></script><script type="text/javascript" async="" src="https://wl.jd.com/wl.js"></script><script type="text/javascript" async="" src="//static.360buyimg.com/risk-cdn/seq/s.js?v=6"></script><script type="text/javascript" async="" src="https://cscssl.jd.com/wl.js"></script><script type="text/javascript" src="//misc.360buyimg.com/jdf/lib/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="//misc.360buyimg.com/user/passport/1.0.0/??/js/underscore-min.js"></script>
    <script type="text/javascript" src="//ivs.jd.com/slide/js/jdSlide.1.0.min.js"></script>
    <script type="text/javascript" src="//js-nocaptcha.jd.com/statics/js/main.min.js"></script>
    <script type="text/javascript">
        $(function(){
            window.SysConfig = {
                encryptInfo:  true ,

            };
        });
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/mvc/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/mvc/css/common/nav.css">
    <style>
        #login_div{
            /*border:1px solid red;*/

            /*设置外边距*/
            margin-top: 0px;

            /*设置内边距*/
            padding: 20px;

            /*设置边框的阴影部分*/
            box-shadow: 2px 2px 4px #000;

            /*设置边框的圆角*/
            border-radius: 20px;
        }
    </style>
</head>
<body style="background: #de6969">
<!-- SDK 登录 -->
<div class="w">
    <div id="logo">
        <a <div=""><li><img src="/mvc/imgs/jddl.jpg" id="京东"></li></a></div><a <div="">

    </a>
</div>
<div id="content">
    <div class="login-wrap">
        <div class="w">
            <div class="tips-wrapper"><div class="tips-inner"><div class="cont-wrapper">
            </div>
            </div>
                <div class="login-box" style="display: none;">
                    <div class="mt tab-h">
                    </div>
                    <div class="msg-wrap">
                        <div class="msg-error hide"><b></b></div>
                    </div>
                    <div class="mc">
                        <div class="form">
                        </div>
                    </div>
                </div>

                <div class="qrcode-login" style="display: block; visibility: visible;">
                    <div class="mc">
                        <div class="qrcode-error-2016" style="left: 0px; display: block;">
                            <div class="qrcode-error-mask">
                            </div>


                        </div>

                        <div class="qrcode-panel">
                            <ul>


                            </ul>
                        </div>

                    </div>
                </div>
                <div class="coagent" id="kbCoagent">
                    <ul>
                        <li>
                            <b></b>

                            <span class="line">|</span>
                        </li>
                        <li>

                        </li>
                        <li class="extra-r">
                            <div>

                            </div>
                        </li>
                    </ul>
                </div>            </div>
        </div>
        <div class="login-banner" style="background-color: #e93854;">		              <div class="w">			         <div id="banner-bg" clstag="pageclick|keycount|20150112ABD|46" class="i-inner" style="background: url(/mvc/imgs/hong.jpg) 0px 0px no-repeat;background-color: #e93854"></div>		              </div>		           </div>
    </div>
</div>
<script type="text/javascript" src="/new/misc/js/login2016.js?v=201702221138"></script>
<script type="text/javascript" src="//misc.360buyimg.com/user/passport/1.0.0/js/login.index.2020-03-23.js" source="widget" charset="utf-8"></script>
<script type="text/javascript">	~function () {var data = [{src:"/mvc/imgs/hong.jpg",bgColor:"#e93854",weight: "1"}	,{src:"/mvc/imgs/hong2.jpg",bgColor:"#c50407",weight: "1"}];						   var getRandom = function (arr) {			var _temp = 0, _random = 0, _weight, _newArr = [];						for (var i = 0; i < arr.length; i++) {				_weight = parseInt(arr[i].weight) ? parseInt(arr[i].weight) : 1;				_newArr[i] = [];				_newArr[i].push(_temp);				_temp += _weight;				_newArr[i].push(_temp);			}						_random = Math.ceil(_temp * Math.random());						for (var i = 0; i< _newArr.length; i++){				if(_random > _newArr[i][0] && _random <= _newArr[i][1]){					return arr[i];				}			}			};				var tpl = '<div class="login-banner" style="background-color: {bgColor}">\		              <div class="w">\			         <div id="banner-bg"  clstag="pageclick|keycount|20150112ABD|46" class="i-inner" style="background: url({imgURI}) 0px 0px no-repeat;background-color: {bgColor}"></div>\		              </div>\		           </div>';							var bgData = getRandom(data);		var bannerHtml = tpl.replace(/{bgColor}/g, bgData.bgColor).replace(/{imgURI}/g, bgData.src);				$('.login-banner').replaceWith(bannerHtml);	}();</script>
<script type="text/javascript" src="//seq.jd.com/jseqf.html?bizId=passport_jd_com_login_pc&amp;platform=js&amp;version=1"></script>



<div class="container" id="login_div">
    <div class="row">
        <form class="form-horizontal" role="form">
            <fieldset>
                <legend>邮箱登录入口</legend>
                <div class="form-group has-feedback">
                    <label for="email" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        <span class="text-danger" id="error_email" style="display: none">sorry,邮箱不存在!</span>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="code" class="col-sm-2 control-label">验证码</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="code" placeholder="请输入验证码">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-success" onclick="send_msg()">发送验证码</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="test">请记住邮箱
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">

                        <button type="button" id="login_btn" onclick="login()" class="btn btn-default" disabled="">登录</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>


<script src="/mvc/plugins/jquery/jquery.min.js"></script>
<script src="/mvc/plugins/bootstrap/js/bootstrap.js"></script>

<script>

    $(function(){
        //当整个页面中的所有的dom元素[标签]全部加载完毕之后,自动执行

        //先从本地存储中获取key=email的对应的value
        let email = localStorage.getItem("email");

        //获取email对应的input标签
        let email_input = document.getElementById("email");

        //将本地存储保存的数据放入到email_input文本框中
        email_input.value = email;
    });


    //封装好记住邮箱的功能
    function ck_email(){
        //根据控件的id属性的名称来获取这个控件的对象
        let ck = document.getElementById("test");

        //判断是否记住了邮箱
        if(ck.checked){//选中了...
            //获取email所在的input的对象
            let email_input = document.getElementById("email");
            //获取email控件的值
            let email = email_input.value;
            //将邮箱进行本地存储 - h5本地存储技术
            //以key-value的形式进行存储的,并且key是唯一的
            localStorage.setItem("email",email);
        }else{
            //清除key
            localStorage.removeItem("email");
        }
    }

    function login(){
        //记住邮箱
        ck_email();

        //获取验证码输入框中输入的数据
        //let code = document.getElementById("code").value;

        let code = $("#code").val();

        //通过ajax方式将页面上输入的数据发送到后台
        $.post("/mvc/user/logincl",{code:code},function(result){
            if(result.code==200){
                //跳转到首页...
                //console.log(result)
                window.location="/mvc/wl.jsp";
            }else{
                //验证码是错误的...
                alert(result.msg);
            }
        })
    }


    //发送验证码按钮触发的单击事件
    function send_msg(){
        let spans = document.getElementById("error_email");
        spans.style.display="none";

        let emails = document.getElementById("email").value;

        //通过ajax方式将emails发送到后台
        $.post("/mvc/user/sendCode",{email:emails},function(result){
            //result就是json对象
            //json对象.key可以得到它对应的value
            //console.log(result.code);
            if(result.code==200){
                alert(result.msg);

                //jquery语法 - 启用禁用按钮
                $("#login_btn").attr("disabled",false);
            }else{
                //显示错误信息
                //先获取错误提示的span对象
                let span = document.getElementById("error_email");
                span.style.display="";
            }
        })
    }
</script>



<div class="links">
    <p class="text-center">
        <a rel="nofollow" target="_blank">
            关于我们
        </a>
        |
        <a rel="nofollow" target="_blank">
            联系我们
        </a>
        |
        <a rel="nofollow" target="_blank">
            人才招聘
        </a>
        |
        <a rel="nofollow" target="_blank">
            商家入驻
        </a>
        |
        <a rel="nofollow" target="_blank">
            广告服务
        </a>
        |
        <a rel="nofollow" target="_blank">
            手机京东
        </a>
        |
        <a target="_blank">
            友情链接
        </a>
        |
        <a target="_blank">
            销售联盟
        </a>
        |
        <a target="_blank">
            京东社区
        </a>
        |
        <a target="_blank">
            京东公益
        </a>
        |
        <a target="_blank" "="" clstag="pageclick|keycount|20150112ABD|9">English Site</a>
    </p></div>


</body>
</html>
